<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="酒店设置" name="hotel">
        <hotel-setting ref="hotelSettingRef" @modify-time="handleModifyTime" />
      </el-tab-pane>
      <el-tab-pane label="接待设置" name="reception">
        <reception-setting ref="receptionSettingRef" @modify-time="handleModifyTime" />
      </el-tab-pane>
      <el-tab-pane label="就餐设置" name="dining">
        <dining-setting ref="diningSettingRef" @modify-time="handleModifyTime" />
      </el-tab-pane>
    </el-tabs>
    <modify-active-time ref="modifyActiveTimeRef" @submit="getMatch" />
  </div>
</template>

<script setup>

import { getCurrentInstance, ref, watch } from 'vue'
import { onMounted } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router'
import usePermissionStore from '@/store/modules/permission'
import HotelSetting from './components/hotelSetting'
import ReceptionSetting from './components/receptionSetting'
import DiningSetting from './components/diningSetting'
import ModifyActiveTime from './components/dialog/modifyActiveTime'

const router = useRouter()
const route = useRoute()
const permissionStore = usePermissionStore()
const { proxy } = getCurrentInstance()
const activeName = ref('')

const handleClick = (tab) => {
  activeName.value = tab.paneName
  router.push({
    path: route.path,
    query: {
      active: activeName.value
    }
  })
}

onMounted(() => {
  permissionStore.setActiveMenu('/logistics/match')
  activeName.value = route.query.active || 'hotel'
})

watch(activeName, (val) => {
  if (val) {
    proxy.$refs[`${val}SettingRef`].init()
  }
})

function handleModifyTime() {
  proxy.$refs['modifyActiveTimeRef'].open(route.params.matchId, activeName.value)
}

function getMatch() {
  proxy.$refs[`${activeName.value}SettingRef`].getMatch()
}

</script>

<style scoped>

</style>
